<script setup>
    import { getPostStationVideoList } from '@/common/apis'

    let videoDialogVisible = $ref(false)

    let defaultVideo = 'https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/E58446054/1.live&autoplay=1&audio=1&accessToken=at.88476sgc60sxjr2kbjmi4b9h29crwa2j-1hreh19q5m-0ci6llk-iowfdjwtu&templete=0'

    let loading = $ref(false)

    let currentIndex = $ref(0)

    let param = $ref(undefined)

    let resData = $ref([])

    // 是否全屏显示视频
    let isFull = $ref(false)

    const showVideo = (id) => {
        currentIndex = 0
        param = undefined
        videoDialogVisible = true

        getPostStationVideoList({ videoId: id }).then(res => {
            resData = res.result.records
            param = resData[0].videoParam
        })
    }

    const handleClick = (index) => {
        loading = true
        currentIndex = index
        param = undefined
        setTimeout(() => {
            loading = false
            param = resData[index].videoParam
        }, 500)
    }

    defineExpose({
        showVideo
    })

</script>

<template>
    <!-- 视频监控 -->
    <el-dialog
        v-model="videoDialogVisible"
        v-if="videoDialogVisible"
        title="视频监控"
        :width="isFull ? '100%' : '1600px'"
    >   
        <div class="flex video-monitoring">
            <div class="iframe-wrap" style="flex: 1;" v-loading="loading">
                <img src="../../assets/images/service/full-screen.png" v-show="!isFull" @click="isFull=true">
                <img src="../../assets/images/service/reduce-screen.png" v-show="isFull" @click="isFull=false">
                <iframe 
                    v-if="param"
                    :style="{width: '100%', height: isFull ? '900px' : '800px'}" 
                    :src="`https://v.tengcity.com/video/index.html?param=${param}&type=web`" 
                    frameborder="0">
                </iframe>
                <iframe 
                    v-else
                    :style="{width: '100%', height: isFull ? '900px' : '800px'}" 
                    :src="defaultVideo" 
                    frameborder="0">
                </iframe>
            </div>
    
            <el-scrollbar class="monitoring-video-list" :style="{height: isFull ? '900px' : '800px'}"  v-if="resData && resData.length">
                <div
                    class="monitoring-item" 
                    v-for="(item, index) in resData" 
                    :key="index"
                    :class="{ active: index==currentIndex }"
                    @click="handleClick(index)"
                >
                    {{ item.videoBiaoti }}
                </div>
            </el-scrollbar>
        </div>


    </el-dialog>

</template>

<style lang="less" scoped>
    .monitoring-video-list{
        width: 250px;
        padding: 0 20px;
        font-size: 18px;

        .monitoring-item{
            padding: 20px 10px;
            margin-bottom: 20px;
            border: 1px solid #06F2FC;
            background: #6a6a6a;
            color: #fff;
            border-radius: 6px;
            cursor: pointer;

            &.active, &:hover{
                background-image: linear-gradient(to right, #30cfd0 0%, #330867 100%);
            }
        }
    }

    .video-monitoring{
        img{
            position: absolute;
            top: 20px;
            right: 60px;
            z-index: 99;
            cursor: pointer;
        }
    }
</style>